<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
import axios from 'axios'
import { showConfirmDialog, showToast } from 'vant'
import { resolve } from 'path'
const z = Math.round(Math.random() * 5)
const value = z
const show = ref(false)
const router = useRouter()
const route = useRoute()
const item = route.query
const doctorbrowse = ref(localStorage.getItem('doctorbrowse'))
let doctor = {}
// 关注开关
const gz = ref(JSON.parse(localStorage.getItem('gz')) || '')
const onGz = () => {
  gz.value = !gz.value
  if (gz.value === true) {
    showConfirmDialog({
      title: '确认取消关注？',
      message:
        '取消关注后，此医生将不会出现在“我关注的医生”列表中，确定取消关注？',
    })
      .then(() => {
        gz.value = true
        showToast('已取消关注')
        localStorage.removeItem('doctor')
        localStorage.setItem('gz', JSON.stringify(gz.value))
      })
      .catch(() => {
        gz.value = false
      })
  } else {
    showToast('已关注,可在“我的医生”中查看')
    // 关注后将医生信息存入localStorage
    doctor = item
    localStorage.setItem('gz', JSON.stringify(gz.value))
    localStorage.setItem('doctor', JSON.stringify(doctor))
  }
}

// 接收首页传来的数据
const handleFzsq = () => {
  router.push('/fzsq')
}
const handleYxyf = () => {
  router.push('/yxyf')
}

const dataList = ref([])
let n = Math.round(Math.random() * 20)
const getData = async () => {
  await axios
    .get('/api/flag', {
      params: {
        pageCode: 1,
        pageSize: 10,
      },
    })
    .then(res => {
      dataList.value = res.data.data.slice(0, n)
    })
}

getData()

const handlePl = () => {
  router.push('/ping')
}
// console.log(data);
const handleJq = () => {
  localStorage.setItem('datajq', JSON.stringify(dataList.value))
  localStorage.setItem('dataitem', JSON.stringify(item))
  router.push({ path: `/jq` })
}

// 图片咨询
const picture = () => {
  router.push('/picture')
}
// 电话咨询
const phone = () => {
  router.push('/phone')
}

// 给专家发消息
const appraise = () => {
  router.push('/xiao/wenzhen')
}

const beforeClose = action =>
  new Promise(resolve => {
    setTimeout(() => {
      // action !== 'confirm'  拦截取消操作
      resolve(action === 'confirm')
    }, 1000)
  })

const before = action => {
  showConfirmDialog({
    title: '分享',
    message:
      '确定要分享给微信朋友吗？',
    beforeClose,
  })
}
</script>

<template>
  <van-nav-bar title="问医生" left-arrow @click-left="$router.back()">
    <template #right>
      <van-icon name="weapp-nav" size="18" @click="before" />
    </template>
  </van-nav-bar>
  <div class="ys">
    <div class="top">
      <dl>
        <dt>
          <img :src="item.doctorimage" alt="" />
        </dt>
        <dd>
          <div class="top-item">
            <span class="name">{{ item.doctorname }}</span>
            <span class="gz" @click="onGz" v-if="gz">+关注</span>
            <span class="wgz" gz:gz @click="onGz" v-else>已关注</span>
          </div>
          <div>
            <span>{{ item.doctorstate }}</span> |
            <span>{{ item.doctoradministre }}</span>
          </div>
          <div>东莞市第八人名医院（东莞市儿童医院）</div>
        </dd>
      </dl>

      <div class="sj">
        <div class="rs">
          <h3>{{ doctorbrowse }}</h3>
          <p>浏览人数</p>
        </div>
        <div class="hpl">
          <h3>{{ item.doctorgood }}%</h3>
          <p>好评率</p>
        </div>
        <div class="pjxy">
          <h3>{{ item.doctortime }}小时</h3>
          <p>平均响应</p>
        </div>
        <div class="fss">
          <h3>{{ item.doctoradmin }}</h3>
          <p>粉丝数</p>
        </div>
      </div>

      <div class="js">
        <van-text-ellipsis
          rows="3"
          :content="item.doctordescword"
          expand-text="查看简介"
          collapse-text="收起"
        />
      </div>
    </div>

    <div class="main">
      <h1>医生服务</h1>
      <div class="main-item">
        <div @click="show = true">
          <img src="./咨询.png" alt="" />
          <h3>在线咨询</h3>
          <p>1对1问医生</p>
        </div>
        <div @click="handleFzsq">
          <img src="./开方.png" alt="" />
          <h3>复诊开方</h3>
          <p>申请用药</p>
        </div>
        <div @click="handleYxyf">
          <img src="./药房.png" alt="" />
          <h3>优选药房</h3>
          <p>用心优选</p>
        </div>
        <div>
          <img src="./预约.png" alt="" />
          <h3>门诊预约</h3>
          <p>未开通</p>
        </div>
      </div>
    </div>

    <!-- 评论 -->
    <div class="pl">
      <div class="pl-item">
        <div class="left"><span class="title">评论</span>({{ n }})</div>
        <div class="right" @click="handlePl">查看更多></div>
      </div>
      <div class="plbox" v-for="(ite, ind) in dataList" :key="ind">
        <div class="pl-com">
          <div class="plCom-top">
            <span>广西百色用户**</span>
            <van-rate v-model="value" allow-half :size="13" />
          </div>
          <div class="pl-com-bottom">
            <span>{{ ite.banviewname }}</span
            ><span>及时回复</span><span>语气很温和</span><span>讲解很细致</span>
          </div>
          <div class="pl-yj">感谢{{ item.doctorname }}医生的回复</div>
          <div class="pl-bottom">{{ ite.banviewtimer }}</div>
        </div>
      </div>
    </div>

    <!-- 锦旗 -->
    <div class="jq">
      <div class="jq-item">
        <div class="left"><span class="title">锦旗</span>({{ n }})</div>
        <div class="right" @click="handleJq">查看更多></div>
      </div>
      <div class="jqbox" v-for="(item, ind) in dataList" :key="ind">
        <div class="name">北京ms388zgj63赠送了医术精湛</div>
        <div class="sj">{{ item.banviewtimer }}</div>
        <div class="img"><img :src="item.banviewimage" alt="" /></div>
      </div>
      <div class="jqfooter">
        <span @click="handleJq">我要送锦旗></span>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer" @click="show = true">
      <div class="notice">
        <div class="notice__inner">
          <div class="notice__box">
            <div class="notice__item">
              用户&nbsp;<span style="color: red">橙某人</span>&nbsp;送的锦旗
            </div>
            <div class="notice__item">
              用户&nbsp;<span style="color: red">小密圈圈</span>&nbsp;送的锦旗
            </div>
            <div class="notice__item">
              用户&nbsp;<span style="color: red">Cooke_</span>&nbsp;送的锦旗
            </div>
            <div class="notice__item">
              用户&nbsp;<span style="color: red">爱音乐网站</span>&nbsp;送的锦旗
            </div>
            <div class="notice__item">
              用户&nbsp;<span style="color: red">青年之声</span>&nbsp;送的锦旗
            </div>
            <div class="notice__item">
              用户&nbsp;<span style="color: red">仙人</span>&nbsp;送的锦旗
            </div>
            <div class="notice__item">
              用户&nbsp;<span style="color: red">三十万人编号</span
              >&nbsp;送的锦旗
            </div>
            <div class="notice__item">
              用户&nbsp;<span style="color: red">Maboroshii</span>&nbsp;送的锦旗
            </div>
            <div class="notice__item">
              用户&nbsp;<span style="color: red">陈亚明</span>&nbsp;送的锦旗
            </div>
            <div class="notice__item">
              用户&nbsp;<span style="color: red">老娘终于发达了</span
              >&nbsp;送的锦旗
            </div>
          </div>
        </div>
      </div>
      <van-button
        style="width: 95%; margin-left: 2.5%"
        type="primary"
        size="large"
        @click="appraise"
        >发消息</van-button
      >
    </div>
    <!-- 咨询弹框 -->
    <van-action-sheet v-model:show="show" style="border-radius: 0%">
      <div class="zxtk">
        <p class="top">
          <span style="font-size: 0.4rem; font-weight: bold">选择咨询类型</span
          ><van-icon @click="show = false" name="cross" />
        </p>
        <div class="zxtk-item">
          <div class="left">
            <dl>
              <dt><img src="./4.png" alt="" /></dt>
              <dd>
                <div class="title">图片咨询</div>
                <div class="se">和医生发文字、图片聊天</div>
                <div class="se">服务时长：20条消息，有效期：24小时</div>
              </dd>
            </dl>
          </div>
          <div class="right">
            <div class="se">￥15/次</div>
            <van-button
              type="primary"
              size="normal"
              style="height: 30px"
              @click="picture"
              >咨询</van-button
            >
          </div>
        </div>
        <div class="zxtk-item">
          <div class="left">
            <dl>
              <dt><img src="./5.png" alt="" /></dt>
              <dd>
                <div class="title">电话咨询</div>
                <div class="se">直接和医生电话通话沟通</div>
                <div class="se">服务时长：10分钟，有效期：24小时</div>
              </dd>
            </dl>
          </div>
          <div class="right">
            <div class="se">￥20/次</div>
            <van-button
              type="primary"
              size="normal"
              style="height: 30px"
              @click="phone"
              >咨询</van-button
            >
          </div>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>
<!-- 11 -->
<style scoped lang="scss">
.wgz {
  margin-left: 4rem;
  display: inline-block;
  height: 0.3rem;
  line-height: 0.3rem;
  margin-top: 0.25rem;
}
.ys {
  width: 100%;
  height: 615px;
  font-size: 0.35rem;
  background: linear-gradient(#1e6fff 0%, #f5f5f5 40%, #f5f5f5 100%);
  padding-top: 10px;
  overflow: scroll;

  .top {
    width: 95%;
    // height: 42%;
    background-color: #fff;
    margin-left: 2.5%;
    border-radius: 10px;
    position: relative;

    dl {
      width: 100%;
      height: 47%;
      display: flex;

      dt {
        width: 80px;
        height: 100%;

        img {
          width: 70px;
          height: 70px;
          border-radius: 50%;
          margin-left: 5px;
          margin-top: 5px;
        }
      }

      dd {
        width: 100%;
        height: 100%;
        margin-left: 10px;

        .top-item {
          width: 100%;
          height: 40px;
          position: relative;

          .name {
            position: absolute;
            font-size: 0.55rem;
            font-weight: bold;
            margin-top: 5px;
          }

          .gz {
            position: absolute;
            width: 60px;
            height: 25px;
            background-color: rgb(240, 195, 179);
            color: coral;
            font-weight: bolder;
            text-align: center;
            line-height: 25px;
            border-radius: 20px;
            font-size: 0.25rem;
            right: 10px;
            top: 10px;
          }
        }
      }
    }

    .sj {
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: space-around;
      font-size: 0.3rem;

      .rs,
      .hpl,
      .pjxy,
      .fss {
        height: 60px;
        line-height: 15px;
        text-align: center;

        p {
          color: rgb(117, 117, 117);
          font-size: 0.25rem;
        }
      }
    }

    .js {
      width: 95%;
      margin-left: 2.5%;
      padding-left: 2px;
      padding-right: 2px;
      font-size: 0.3rem;
    }
  }

  .main {
    width: 95%;
    height: 160px;
    margin-left: 2.5%;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 10px;

    h1 {
      font-size: 0.4rem;
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
    }

    .main-item {
      font-size: 0.3rem;
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-around;
      margin-top: 10px;

      div {
        text-align: center;

        img {
          width: 50px;
          height: 50px;
        }

        h3 {
          font-size: 0.3rem;
        }

        p {
          color: rgb(117, 117, 117);
          font-size: 0.27rem;
        }
      }
    }
  }
  //评论
  .pl {
    width: 95%;
    height: 600px;
    background-color: #fff;
    margin-left: 2.5%;
    border-radius: 10px;
    margin-top: 10px;
    padding-top: 10px;
    overflow: hidden;

    .pl-item {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;

      .left {
        font-size: 0.3rem;
        color: #9a9a9a;
        display: flex;
        align-items: center;

        .title {
          font-size: 0.5rem;
          font-weight: bold;
          color: #000;
          margin-right: 5px;
        }
      }

      .right {
        font-size: 0.3rem;
        color: #1e6fff;
      }
    }
    .plbox {
      width: 100%;
      height: 170px;
      border-bottom: 1px solid #e3e3e3;

      .pl-com {
        width: 100%;
        height: 100px;
        margin-top: 15px;
        font-size: 0.3rem;

        .plCom-top {
          width: 100%;
          padding: 0 10px;
          display: flex;
          justify-content: space-between;
        }

        .pl-com-bottom {
          width: 100%;
          padding: 0 10px;
          display: flex;
          flex-wrap: wrap;

          span {
            //width: 85px;
            padding: 0 10px;
            height: 27px;
            border: 1px solid #bcbcbc;
            color: #464646;
            text-align: center;
            line-height: 27px;
            border-radius: 15px;
            margin-right: 10px;
            margin-top: 10px;
          }
        }

        .pl-yj {
          width: 100%;
          padding: 0 10px;
          margin-top: 10px;
          font-size: 0.4rem;
        }

        .pl-bottom {
          width: 100%;
          padding: 0 10px;
          margin-top: 5px;
          font-size: 0.25rem;
          color: #9a9a9a;
        }
      }
    }
  }

  //锦旗
  .jq {
    width: 95%;
    background-color: #fff;
    margin-left: 2.5%;
    border-radius: 10px;
    margin-top: 10px;
    padding-top: 10px;
    position: relative;
    margin-bottom: 100px;
    padding-bottom: 30px;

    .jq-item {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;

      .left {
        font-size: 0.3rem;
        color: #9a9a9a;
        display: flex;
        align-items: center;

        .title {
          font-size: 0.5rem;
          font-weight: bold;
          color: #000;
          margin-right: 5px;
        }
      }

      .right {
        font-size: 0.3rem;
        color: #1e6fff;
      }
    }
    .jqbox {
      width: 100%;
      // padding-left: 2.5%;
      //border-bottom: 1px solid #f2f2f2;
      margin-bottom: 10px;

      .name {
        font-size: 0.35rem;
        margin-left: 2.5%;
      }

      .sj {
        font-size: 0.3rem;
        margin-top: 5px;
        color: #9a9a9a;
        margin-left: 2.5%;
      }

      .img {
        width: 100%;
        height: 300px;

        img {
          width: 70%;
          height: 300px;
          margin-left: 15%;
        }
      }
    }

    .jqfooter {
      width: 100%;
      display: flex;
      justify-content: space-around;
      position: absolute;
      left: 0;
      bottom: 10px;
      font-size: 0.3rem;
      color: #3b68ca;
    }
  }

  //弹幕
  .notice {
    width: 300px;
    height: 63px;
    // position: relative;
    mask: linear-gradient(360deg, #000 30%, transparent);
    //margin-bottom: 20px;
    margin-left: 10px;
  }
  .notice__inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 14px;
    color: #fcfdff;
  }
  .notice__box {
    animation: roll 20s linear infinite;
  }
  .notice__item {
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    white-space: nowrap;
    background-color: #79a9ff;
    border-radius: 15px;
    margin-bottom: 10px;
  }
  @keyframes roll {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-300px);
    }
  }

  //底部
  .footer {
    width: 100%;
    height: 100px;
    //background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 35px;
    padding: 10px 0;
    //background-color: #fff;
  }

  //咨询弹框
  .zxtk {
    width: 100%;
    height: 400px;

    .top {
      display: flex;
      justify-content: space-between;
      padding: 15px 10px;
    }

    .zxtk-item {
      width: 92%;
      height: 100px;
      background-color: #f9fafb;
      border-radius: 10px;
      margin-left: 4%;
      display: flex;
      margin-bottom: 15px;

      .left {
        width: 80%;
        height: 100%;

        dl {
          width: 100%;
          height: 100%;
          display: flex;

          dt {
            width: 50px;
            height: 50px;
            margin-top: 10px;
            margin-left: 10px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 15px;
            }
          }

          dd {
            margin-left: 10px;

            .title {
              height: 20px;
              font-size: 0.35rem;
              margin-top: 10px;
              font-weight: bolder;
            }

            .se {
              font-size: 0.25rem;
              color: #bcbcbc;
              margin-top: 10px;
            }
          }
        }
      }

      .right {
        margin-left: 5px;

        .se {
          color: orangered;
          margin-top: 15px;
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>
